<template>
    <div>
        <div class="header-bar">
            <span class="icon icon-back"></span>
            <div class="right">
                <span class="icon icon-cart"></span>
                <span class="icon icon-menu"></span>
            </div>
        </div>

        <div class="banner-box">
            <app-swiper :swiper-slides="pics"></app-swiper>
        </div>

        <div class="describe">
            <div class="desc-bar">
                <div class="title">Aptamil 德国爱他美 婴儿奶粉 2段800/克 3罐装 6-10月</div>
                <div class="store">
                    <span class="icon icon-star"></span>
                    收藏
                </div>
            </div>
            <div class="down">
                <div class="price-wrap">
                    <div class="now">￥445.00</div>
                    <div class="before">￥998.00</div>
                </div>
                <div class="labels">
                    <div class="disc">
                        <span>6.5折</span>
                        <span>包邮</span>
                    </div>
                    <div class="features">
                        <span>正品货源</span>
                        <span>一件代发</span>
                        <span>全国直邮</span>
                        <span>售后无忧</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="detail-box">
            <div class="tab">
                <router-link to="/detail/subDetail">商品详情</router-link>
                <router-link to="/detail/subEvaluate">买家口碑</router-link>
            </div>
            <router-view></router-view>
        </div>

        <div class="pay-bar">
            <div class="total">
                总价：
                <span>￥0.00</span>
            </div>
            <div class="pay" @click="buyNow()">立即购买</div>
            <div class="add" @click="addShopCart()">加入购物车</div>
        </div>

        <div class="pay-msg" v-show="isWantToPay">
            <div class="mask"></div>
            <div class="pay-detail">
                <div class="icon icon-close" @click="isWantToPay=!isWantToPay"></div>
                <div class="product">
                    <img src="../img/product-pic1.jpg" alt="">
                    <div class="desc">
                        <div class="price">￥445.00</div>
                        <div class="stock">库存123456件</div>
                        <div class="select">请选择商品属性</div>
                    </div>
                </div>
                <div class="num-wrap">
                    <span class="num-title">购买数量</span>
                    <div class="num-btn-group">
                        <span class="icon icon-reduce">-</span>
                        <input type="text" value="1">
                        <span class="icon icon-add">+</span>
                    </div>
                </div>
                <div class="size-wrap">
                    <h6>大小</h6>
                    <div class="size-list">
                        <label><input type="radio" checked name="size">
                            <span>1L</span>
                        </label>
                        <label><input type="radio" name="size">
                            <span>2L</span>
                        </label>
                        <label><input type="radio" name="size">
                            <span>3L</span>
                        </label>
                        <label><input type="radio" name="size">
                            <span>4L</span>
                        </label>

                    </div>
                </div>
                <div class="age-wrap">
                    <h6>年龄</h6>
                    <div class="age-list">
                        <label><input type="radio" checked name="age">
                            <span>5岁以下</span>
                        </label>
                        <label><input type="radio" name="age">
                            <span>3岁以下</span>
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import appSwiper from "../components/banner";
export default {
  name: "DetailPage",
  components: {
    appSwiper
  },
  data() {
    return {
      isShowDetail: true,
      isWantToPay: false,
      pics: []
    };
  },
  methods: {
    buyNow() {
      this.isWantToPay = true;
    },
    addShopCart() {
      this.isWantToPay = true;
    },
    getPics() {
      this.pics = [
        "/images/banner.jpg",
        "/images/banner.jpg",
        "/images/banner.jpg",
        "/images/banner.jpg",
        "/images/banner.jpg"
      ];
    }
  },
  created() {
    this.getPics();
  }
};
</script>

<style scoped lang="less">
@import "../style/proDetails.less";
</style>